<template>
  <div>
    <van-nav-bar
      :title="indexDetailData && indexDetailData.institutionName"
      left-arrow
      @click-left.stop="handleNavLeftClick"
      v-if="!$isDD"
      class="indexInfosPage"
    />
    <div class="indexDetailInfos">
      <div class="indexDetailHeader" :style="{ top: !$isDD ? '46px' : '0px' }">
        <!-- 头部 -->
        <div class="generalHeader">
          <div class="dimension">
            <div class="dimensionName">{{ this.initPerformanceInfos.dimensionName }}综合考核得分</div>
            <div class="dimensionIcon" @click="vantPup">
              <span class="icon icon-cechoutishuoming" style="color: rgba(114, 118, 135, 1)"></span>
            </div>
          </div>
          <div class="assessment">
            <div class="assessmentResult">{{ this.initPerformanceInfos.assessmentResult }}</div>
            <div class="assessmentSort">
              <div class="sortDesc">全司排名</div>
              <div
                :class="[
                  { sort: true },
                  { rankFrist: this.initPerformanceInfos.sort === '1' },
                  { rankSecond: this.initPerformanceInfos.sort === '2' },
                  { rankThird: this.initPerformanceInfos.sort === '3' }
                ]"
              >
                {{ this.initPerformanceInfos.sort }}
              </div>
            </div>
          </div>
        </div>
        <div class="performanceScoreGruop">
          <div v-for="item in this.initPerformanceInfos.performanceIndexInfos" :key="item.indexId" class="groupList">
            <div class="scoreGruopItem">
              <div class="scoreGruopBox">
                <div class="scoreName">{{ item.indexName }}得分</div>
                <div class="scroreResult">{{ item.assessmentResult  }}</div>
                <div class="scroreRankContent">
                  <div class="scroreRankName">排名</div>
                  <div class="scroreRank">{{ item.sort }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="performanceScoreContainer">
        <div v-for="item in this.initPerformanceInfos.performanceIndexInfos" :key="item.indexId">
          <div class="scoreContent">
            <div class="scoreHeader">
              <div class="scoreTop">
                <div class="dimensionTitle">
                  <div class="dimensionName">{{ item.indexName }}</div>
                </div>
                <div class="dimensionWeight">
                  <div class="weightName">权重</div>
                  <div>{{ item.weight + '%' }}</div>
                </div>
              </div>
              <div v-for="v in item.indexSecondChValue" :key="v.indexId">
                <div class="dimensionDesc">
                  {{ v.indexName }}
                  <div class="indexNameLine"></div>
                </div>
                <div class="chContent">
                  <div class="chContentItem">
                    <div class="chContentItemLeft">得分</div>
                    <div class="chContentItemRight">{{ v.examineScore }}</div>
                  </div>

                  <div class="chContentItem">
                    <div class="chContentItemLeft">排名</div>
                    <div class="chContentItemRight">{{ v.sort }}</div>
                  </div>

                  <div class="chContentItem">
                    <div class="chContentItemLeft">权重</div>
                    <div class="chContentItemRight">{{ v.weight + '%' }}</div>
                  </div>
                </div>
              </div>
              <div class="dimensionContainer">
                <div v-for="v in item.indexSecondSets" :key="v.indexId" class="dimensionContent">
                   <img src="@/assets/images/excess.png" alt="" class="dimensionExcess" v-if="v.overStatus" />
                  <div class="dimensionDetail">
                    <div class="dimensionDetailName" :style="{paddingRight:v.overStatus? '26px' : '0px'  }">{{ v.indexName}}</div>
                    <div class="dimensionDetailNumber">{{ v.indexValue }}{{v.indexUnit}}</div>
                    <div class="businessData">
                      <div class="business">
                        <div class="businessName">排名</div>
                        <div class="businessNumber">{{ v.sort }}</div>
                      </div>
                      <div class="business">
                        <div class="businessName">权重</div>
                        <div class="businessNumber">{{ v.weight + '%' }}</div>
                      </div>
                    </div>
                    <div class="achievementContent">
                      <div class="achievement">评分</div>
                      <div class="achievement">{{ v.examineScore }}</div>
                    </div>
                    <div class="view">
                      <img
                        src="@/assets/images/bluePiece.png"
                        alt=""
                        class="achievementPiece"
                        :style="{
                          left: `${
                            Number(v.examineScore) >= Number(v.challengeValue)
                              ? 100
                              : (Number(v.examineScore) / Number(v.challengeValue)) * 100
                          }%`
                        }"
                        v-if="Number(v.examineScore) >= 100"
                      />
                      <img
                        src="@/assets/images/yellowPiece.png"
                        alt=""
                        class="achievementPiece"
                        :style="{
                          left: `${
                            Number(v.examineScore) >= Number(v.challengeValue)
                              ? 100
                              : (Number(v.examineScore) / Number(v.challengeValue)) * 100
                          }%`
                        }"
                        v-else
                      />
                      <div
                        :class="`${Number(v.examineScore)}` >= 100 ? 'progress' : 'yellowProgress'"
                        :style="{
                          width: `${
                            Number(v.examineScore) >= Number(v.challengeValue)
                              ? 100
                              : (Number(v.examineScore) / Number(v.challengeValue)) * 100
                          }%`
                        }"
                      ></div>
                      <div class="target"></div>
                      <div class="target targetChange"></div>
                    </div>
                    <div class="targetNumber">
                      <div class="targetValue">0</div>
                      <div class="targetValue" style="paddingLeft:16px">{{ v.doorValue }}</div>
                      <div class="targetValue">{{ v.targetValue }}</div>
                      <div class="targetValue">{{ v.challengeValue }}</div>
                    </div>
                  </div>
                </div>
              </div>

              <div v-for="m in item.indexInfoList" :key="m.indexId">
              <div v-show="m.showFlag">
                  <div class="dimensionDesc">
                  {{ m.indexName }}
                  <div class="indexNameLine"></div>
                </div>
                <div class="chContent">
                  <div class="chContentItem">
                    <div class="chContentItemLeft">得分</div>
                    <div class="chContentItemRight">{{ m.examineScore }}</div>
                  </div>

                  <div class="chContentItem">
                    <div class="chContentItemLeft">排名</div>
                    <div class="chContentItemRight">{{ m.sort }}</div>
                  </div>

                  <div class="chContentItem">
                    <div class="chContentItemLeft">权重</div>
                    <div class="chContentItemRight">{{ m.weight + '%' }}</div>
                  </div>
                </div>
              </div>
                <div v-for="c in m.indexThirdChValue" :key="c.indexId">
                  <div class="dimensionDesc">
                    {{ c.indexName }}
                    <div class="indexNameLine"></div>
                  </div>
                  <div class="chContent">
                    <div class="chContentItem">
                      <div class="chContentItemLeft">得分</div>
                      <div class="chContentItemRight">{{ c.examineScore }}</div>
                    </div>

                    <div class="chContentItem">
                      <div class="chContentItemLeft">排名</div>
                      <div class="chContentItemRight">{{ c.sort }}</div>
                    </div>

                    <div class="chContentItem">
                      <div class="chContentItemLeft">权重</div>
                      <div class="chContentItemRight">{{ c.weight + '%' }}</div>
                    </div>
                  </div>
                </div>
                <div class="dimensionContainer">
                  <div v-for="n in m.indexThirdSets" :key="n.indexId" class="dimensionContent">
                    <img src="@/assets/images/excess.png" alt="" class="dimensionExcess" v-if="n.overStatus" />
                    <div class="dimensionDetail">
                      <div class="dimensionDetailName" :style="{paddingRight:n.overStatus ? '26px' : '0px'}">{{ n.indexName }}</div>
                      <div class="dimensionDetailNumber">{{ n.indexValue }}{{n.indexUnit}}</div>
                      <div class="businessData">
                        <div class="business">
                          <div class="businessName">排名</div>
                          <div class="businessNumber">{{ n.sort }}</div>
                        </div>
                        <div class="business">
                          <div class="businessName">权重</div>
                          <div class="businessNumber">{{ n.weight + '%' }}</div>
                        </div>
                      </div>
                      <div class="achievementContent">
                        <div class="achievement">评分</div>
                        <div class="achievement">{{ n.examineScore }}</div>
                      </div>
                      <div class="view">
                        <img
                          src="@/assets/images/bluePiece.png"
                          alt=""
                          class="achievementPiece"
                          :style="{
                            left: `${
                              Number(n.examineScore) > Number(n.challengeValue)
                                ? 100
                                : (Number(n.examineScore) / Number(n.challengeValue)) * 100
                            }%`
                          }"
                          v-if="Number(n.examineScore) >= 100"
                        />
                        <img
                          src="@/assets/images/yellowPiece.png"
                          alt=""
                          class="achievementPiece"
                          :style="{
                            left: `${
                              Number(n.examineScore) > Number(n.challengeValue)
                                ? 100
                                : (Number(n.examineScore) / Number(n.challengeValue)) * 100
                            }%`
                          }"
                          v-else
                        />
                        <div
                          :class="`${Number(n.examineScore)}` >= 100 ? 'progress' : 'yellowProgress'"
                          :style="{
                            width: `${
                              Number(n.examineScore) >= Number(n.challengeValue)
                                ? 100
                                : (Number(n.examineScore) / Number(n.challengeValue)) * 100
                            }%`
                          }"
                        ></div>
                        <div class="target"></div>
                        <div class="target targetChange"></div>
                      </div>
                      <div class="targetNumber">
                        <div class="targetValue">0</div>
                        <div class="targetValue" style="paddingLeft:16px">{{ n.doorValue }}</div>
                        <div class="targetValue">{{ n.targetValue }}</div>
                        <div class="targetValue">{{ n.challengeValue }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="showPop" position="bottom">
      <div class="testh">
        <div class="pophead">
          <span>指标使用说明</span>
          <span @click.stop="overlay" class="guanbi icon icon-guanbi"></span>
        </div>
        <div class="content-box">
          <img class="commentImg" alt="" src="@/assets/images/performanceComment.png" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  props: {
    indexDetailData: {
      type: Object,
      default: () => {}
    },
    dimensionId: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      /** 处理后的值 */
      initPerformanceInfos: {},
      showPop: false
    }
  },
  created() {
    if (this.$isDD) {
      this.$dd.ui.webViewBounce.disable()
      this.setTitle()
      this.$dd.ready(() => {
        if (this.$dd.android) {
          document.addEventListener('backbutton', this.backButtonEvent)
        } else {
          this.$dd.biz.navigation.setLeft({
            control: true,
            text: '',
            onSuccess: result => {
              // IOS调用方法 ios返回不起作用，需要手动让他返回window.history.go(-1)
              this.dataCtl()
            },
            onFail(err) {
              console.log('返回失败', err)
            }
          })
        }
      })
    }
  },
  mounted() {},
  destroyed() {
    if (this.$dd.android) {
      document.removeEventListener('backbutton', this.backButtonEvent)
    }
  },
  methods: {
    initData(val) {
      if (val === null) {
        return
      }
      const initPerformanceData = _.cloneDeep(val)
      const { performanceIndexInfos } = initPerformanceData
      /**
       * 通过indexId找refCode
       */
      performanceIndexInfos.map(v => {
        v.indexSecondSets = []
        v.indexSecondChValue = []
        v.indexSubSets.map(i => {
          if (i.refCode === v.indexId) {
            if (i.challengeValue) {
              v.indexSecondSets.push(i)
            } else {
              v.indexSecondChValue.push(i)
            }
          }
        })
        v.indexInfoList.map(i => {
          i.indexThirdSets = []
          i.indexThirdChValue = []
          v.indexSubSets.map(m => {
            if (i.indexId === m.refCode) {
              if (m.challengeValue) {
                i.indexThirdSets.push(m)
              } else {
                i.indexThirdChValue.push(m)
              }
            }
          })
        })
        return v
      })
      this.initPerformanceInfos = initPerformanceData
      console.log(this.initPerformanceInfos, 'this.initPerformanceInfos')
    },
    handleNavLeftClick() {
      this.dataCtl()
    },
    /** 点击返回数据处理函数 */
    dataCtl() {
      window.sessionStorage.setItem('PERFORMANCE_DIMENSION_ID', this.dimensionId)
      this.$router.back()
    },
    setTitle() {
      if (this.$isDD) {
        this.$dd.ready(() => {
          this.$dd.biz.navigation.setTitle({ title: this.indexDetailData && this.indexDetailData.institutionName })
        })
      }
    },
    vantPup() {
      this.showPop = true
    },
    overlay() {
      this.showPop = false
    },
    backButtonEvent(ev) {
      if (ev) {
        ev.preventDefault() // 阻止返回
      }
      this.dataCtl()
    }
  },
  watch: {
    indexDetailData: {
      deep: true,
      //   immediate: true,
      handler(newVal) {
        this.initData(newVal)
        this.setTitle()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.indexInfosPage {
  padding-top: 46px;
}
.indexDetailInfos {
  .indexDetailHeader {
    position: fixed;
    z-index: 999;
    background: #292e3a;
    border-bottom: 16px solid #292e3a;
    .generalHeader {
      height: 94px;
      border-radius: 8px 8px 0 0;
      padding: 16px 20px 0 20px;
      background: #393f52;

      .dimension {
        display: flex;
        align-items: center;
        padding-bottom: 8px;

        .dimensionName {
          line-height: 25px;
          font-size: 18px;
          font-weight: 400;
          color: #e9e9ed;
          padding-right: 9px;
        }
      }

      .assessment {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .assessmentResult {
          line-height: 37px;
          font-size: 32px;
          font-weight: bold;
          color: #fff;
        }

        .assessmentSort {
          display: flex;
          .sortDesc {
            line-height: 20px;
            font-weight: 400;
            color: #d3d4da;
            font-size: 14px;
          }
          .sort {
            width: 28px;
            height: 20px;
            margin: 0 8px;
            background: linear-gradient(135deg, rgba(134, 142, 167, 0.14) 0%, rgba(98, 107, 135, 0.14) 100%);
            border-radius: 10px;
            text-align: center;
            line-height: 20px;
          }
          .rankFrist {
            background: linear-gradient(135deg, rgba(255, 215, 131, 0.91) 0%, rgba(255, 185, 75, 0.43) 100%);
          }
          .rankSecond {
            background: linear-gradient(135deg, rgba(255, 144, 69, 0.84) 0%, rgba(255, 97, 50, 0.6) 100%);
          }
          .rankThird {
            background: linear-gradient(135deg, rgba(145, 182, 255, 0.51) 0%, rgba(121, 117, 255, 0.42) 100%);
          }
        }
      }
    }
    // todo 拼写
    .performanceScoreGruop {
      width: 335px;
      background: #323747;
      display: flex;
      flex-wrap: wrap;
      border-radius: 0 0 8px 8px;
      .groupList {
        // todo 拼写
        &:nth-child(odd) .scoreGruopBox {
          border-right: 1px solid #444a5c;
        }
        // todo 拼写
        .scoreGruopItem {
          width: 167px;
          padding: 16px 0px 16px 20px;
          // todo 拼写
          .scoreGruopBox {
            width: 147px;
            .scoreName {
              line-height: 20px;
              color: #e9e9ed;
              font-size: 14px;
              font-weight: 500;
              padding-bottom: 4px;
            }
            // todo 拼写
            .scroreResult {
              font-size: 24px;
              font-weight: bold;
              color: #e9e9ed;
              line-height: 28px;
              padding-bottom: 6px;
            }
            // todo 拼写
            .scroreRankContent {
              display: flex;
              // todo 拼写
              .scroreRankName {
                line-height: 20px;
                font-size: 14px;
                font-weight: 400;
                color: #979aa4;
                padding-right: 4px;
              }
              // todo 拼写
              .scroreRank {
                line-height: 19px;
                font-size: 16px;
                color: #e9e9ed;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
  .performanceScoreContainer {
    margin-top: 213px;
    .scoreContent {
      background: #323747;
      border-radius: 8px;
      padding-top: 16px;
      .scoreHeader {
        .scoreTop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0px 20px 8px;
          // margin-bottom: 16px;
          .dimensionTitle {
            display: flex;
            align-items: center;
            .dimensionName {
              font-size: 18px;
              font-weight: 600;
              color: #e9e9ed;
              line-height: 25px;
              padding-right: 9px;
            }
          }
          .dimensionWeight {
            display: flex;
            font-size: 14px;
            font-weight: 400;
            color: #e9e9ed;
            line-height: 16px;
            .weightName {
              padding-right: 4px;
            }
          }
        }
        .dimensionDesc {
          padding: 0px 20px 8px 30px;
          font-size: 16px;
          font-weight: 400;
          color: #f9f9f9;
          line-height: 22px;
          position: relative;
          .indexNameLine {
            width: 4px;
            height: 13px;
            background: #0a82fa;
            position: absolute;
            top: 4px;
            left: 20px;
          }
        }
        .chContent {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0px 20px 8px 20px;
          .chContentItem {
            display: flex;
            .chContentItemLeft {
              margin-right: 4px;
              line-height: 20px;
              color: #979aa4;
              font-weight: 400;
              font-size: 12px;
            }
            .chContentItemRight {
              font-size: 14px;
              font-weight: 600;
              color: #e9e9ed;
              line-height: 20px;
            }
          }
        }
        .dimensionContainer {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 0px 14px;
          margin-bottom: 10px;
        }
        .dimensionContent {
          position: relative;
          height: 100%;
          .dimensionExcess {
            width: 66px;
            height: 48px;
            position: absolute;
            top: -8px;
            right: -10px;
          }
          .dimensionDetail {
            width: 148px;
            background: #363c4c;
            border-radius: 8px;
            padding: 12px 13px;
            margin-bottom: 10px;
            .dimensionDetailName {
              min-height: 40px;
              font-size: 13px;
              font-weight: 400;
              color: #e9e9ed;
              line-height: 20px;
            }
            .dimensionDetailNumber {
              padding-top: 4px;
              font-size: 18px;
              font-weight: bold;
              color: #ffffff;
              line-height: 20px;
            }
            .businessData {
              padding-top: 10px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .business {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .businessName {
                  font-size: 12px;
                  font-weight: 400;
                  color: #d3d4da;
                  line-height: 16px;
                  padding-right: 4px;
                }
                .businessNumber {
                  font-size: 14px;
                  font-weight: 600;
                  color: #e9e9ed;
                  line-height: 20px;
                }
              }
            }
            .achievementContent {
              padding-top: 10px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .achievement {
                font-size: 12px;
                font-weight: 400;
                color: #d3d4da;
                line-height: 16px;
              }
            }
            .view {
              margin-top: 12px;
              position: relative;
              background: #444a5c;
              height: 10px;
              width: 122px;
              .achievementPiece {
                width: 8px;
                height: 18px;
                position: absolute;
                top: -8px;
              }
              .progress {
                background: #4188e8;
                height: 10px;
              }
              .yellowProgress {
                background: #ffa925;
                height: 10px;
              }
              .target {
                position: absolute;
                top: 0;
                left: 46.7%;
                width: 2px;
                height: 10px;
                background: #fff;
              }
              .targetChange {
                left: 66.7%;
              }
            }
            .targetNumber {
              display: flex;
              justify-content: space-between;
              .targetValue {
                width: 17px;
                font-size: 10px;
                font-weight: 400;
                color: #ffffff;
                line-height: 12px;
              }
            }
          }
        }
      }
    }
  }
}
.testh {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #292e3a;
  .pophead {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    position: relative;
    .guanbi {
      position: absolute;
      top: 0;
      right: 0;
      box-sizing: border-box;
      font-size: 20px;
      padding: 0 0 0 10px;
    }
  }
  .content-box {
    padding-bottom: 10px;
    overflow: auto;
    .commentImg {
      width: 100%;
    }
  }
}
</style>
